Flipper

https://fbflipper.com/

什么是 Flipper？

一个可扩展的跨平台的调试工具，用来调试 iOS、Android 和 RN 应用。

Flipper 是作为一个平台构建的。除了使用已经包含的工具之外，你还可以自己创建插件来可视化和调试来自移动应用程序的数据。Flipper 负责在移动应用程序上来回发送数据、调用函数和侦听事件。

Flipper 引入

OpenSSL(windows)

下载 OpenSSL 并加入到 PATH

OpenSSL 下载

• https://wiki.openssl.org/index.php/Binaries
• https://slproweb.com/products/Win32OpenSSL.html

Win64OpenSSL_Light-3_0.exe 下载链接

加入到 PATH

OpenSSL安装目录\bin 加入到 PATH

验证

终端：openssl version

WatchMan

https://facebook.github.io/watchman/
下载并安装完 WatchMan 后将 bin 目录加入到 PATH 中

Gradle 引入

repositories {
  mavenCentral()
}

dependencies {
  debugImplementation 'com.facebook.flipper:flipper:0.182.0'
  debugImplementation 'com.facebook.soloader:soloader:0.10.4'

  releaseImplementation 'com.facebook.flipper:flipper-noop:0.182.0'
}

常用的 Flipper 插件

Flipper 本身只提供架构平台。使它有用的是建立在它之上的插件：日志、布局检查器和网络检查器都是插件。你可以针对你的业务逻辑和应用程序中的用例构建插件。我们提供带有内置通用插件的 Flipper。

• Logs 查看 log
• Crash Reporter 查看 Crash
• Layout 查看布局
• Databases 查看和修改 Sqlite 数据库数据
• Images(Fresco) 查看 Fresco 加载图片
• LeakCanary
• SP 查看和修改 SP
• Network 查看网络请求
• UI Debugger 查看布局，比 Layout 功能更强

Logs

展示设备的 log 无需额外的代码引入

Crash Reporter

查看 Crash 信息

import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;

client.addPlugin(CrashReporterPlugin.getInstance());

Layout

查看布局，现在由 UI Debugger 替换掉

代码：

import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;

final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();

client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));

效果：

Databases

查看 Sqlite 数据库
代码：

import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;

client.addPlugin(new DatabasesFlipperPlugin(context));

效果：

Shared Preferences Viewer Plugin

查看 SP

如果项目中用了 mmkv，那么这个插件就用不了，初始化时会报错：

java.lang.UnsupportedOperationException: Intentionally Not implement in MMKV 具体见源码 MMKV.java

mmkv-viewer

1. Flipper 中安装插件 mmkv-viewer
2. 引入 debugImplementation 'com.github.ddyos:flipper-plugin-mmkv-viewer:1.0.0'
3. 代码引入

private fun initMMKVPlugin(client: FlipperClient, context: Context) {
    client.addPlugin(
        MMKVFlipperPlugin(
            listOf(
                MMKVDescriptor(getDefaultId(context)),
                //                MMKVDescriptor("another_mmkv", MMKV.MULTI_PROCESS_MODE, cryptKey)
            )
        )
    )
    //        client.addPlugin(MMKVFlipperPlugin("other_mmkv"))
}

Network

查看网络请求，可用来替换 Charles 看抓包数据

UI Debugger

用来替换旧版本的 Layout

代码：

client.addPlugin(UIDebuggerFlipperPlugin(UIDContext.create(context.applicationContext as Application)))

Images

目前只支持查看 Fresco 库加载 Image

LeakCanary

效果：

遇到的问题

No device found

• 原因：Android SDK 路径不对
• 解决：设置正确的 SDK 路径

Windows 上运行 Flipper 可能会报错

Failed to start flipper-server

Error: It looks like you don't have OpenSSL installed. Please install it to continue.

解决：安装 OpenSSL，并将 bin 目录加入到 Path

不能在除 debug 外的其他 buildType 运行

初始化就会崩溃